
$speed: 0.5;
$count:2;
$branchWidth: 450;
$speed-lfLineAnimate: ($branchWidth*$count/4/5*$speed/10);
$line:(($branchWidth * $count) / 2 - $branchWidth / 2 + 3);
$energyContent_area: ($branchWidth * $count);

.aSurnameLineAnimate {
  animation: aSurnameAM $speed+s linear;
}

.lfLineAnimate {
  animation: lfAM $speed-lfLineAnimate+s linear;
}

.rgLineAnimate {
  animation: rgAM $speed-lfLineAnimate+s linear;
}

.firstLineAnimate {
  animation: firstLineAM $speed+s linear;
}

.secondLineAnimate {
  animation: secondLineAM $speed+s linear;
}

.branchShuLineAnimate {
  animation: branchShuLineAM $speed+s linear;
}

.lfBranchLineAnimate {
  animation: lfBranchAM $speed+s linear;
}

.rgBranchLineAnimate {
  animation: rgBranchAM $speed+s linear;
}

.firstBranchLineAnimate {
  animation: firstBranchLineAM $speed+s linear;
}

.chargingPileEnergyFlow_area {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;

  .detailInfo_area {
    position: absolute;
    width: 202px;
    height: 462px;
    // border: 1px solid red;
    top: 338px;
    left: 92px;
    z-index: 9999;
    background: url('./imgs/detail_bg.png') no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 25px 25px;

    .detailInfo_area_item {
      display: flex;
      width: 100%;
      // border: 1px solid red;
      height: fit-content;

      .detailInfo_area_item_lf {
        width: 18px;
        height: 20px;
        // background-color: red;
        margin-right: 5px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .detailInfo_area_item_rg {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-top: 3px;

        label {
          font-family: SourceHanSansKRegular;
          font-weight: 400;
          font-size: 12px;
          color: #c4e1ff;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
          font-style: normal;
          margin-bottom: 5px;
          flex-shrink: 0;
        }

        span {
          font-family: DINMedium;
          font-weight: 500;
          font-size: 14px;
          color: #e6f1fa;
          font-style: normal;

          span {
            font-size: 12px;
            color: #edf8ff;
            margin-left: 5px;
          }
        }
      }
    }
  }

  .energyFlow_area {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    // border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .topContainer_area {
        font-size: 30px;
        text-align: center;
      width: 201px;
      background-size: 100% 100%;
    }

    .energyFlow_content_area {
      width: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      // 关于能流样式
      // 线段路径统一样式
      .pathH {
        height: 6px;
        box-shadow: inset 0px 0px 2px 2px rgba(111, 182, 255, 0.6);
      }

      .pathW {
        width: 6px;
        box-shadow: inset 0px 0px 2px 2px rgba(111, 182, 255, 0.6);
      }

      // 能流统一样式
      .energH {
        height: 34px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        border-radius: 3px;
        filter: blur(1px);
      }

      .energW_lf {
        width: 34px;
        background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        border-radius: 3px;
        filter: blur(1px);
      }

      .energW_rg {
        width: 34px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        border-radius: 3px;
        filter: blur(1px);
      }

      .aSurname_line {
        height: 30px;
        position: relative;

        .aSurname_line_energy {
          width: 0px;
          position: absolute;
          top: -20px;
        }
      }

      .leftAndRightSegments_area {
        display: flex;

        .lf_line {
          width: $line+px;
          position: relative;

          .lf_line_energy {
            height: 0px;
            position: absolute;
            right: 0px;
          }
        }

        .rg_line {
          width: $line+px;
          position: relative;

          .rg_line_energy {
            height: 0px;
            position: absolute;
            left: 0px;
          }
        }
      }

      .energyContent_area {
        width: $energyContent_area+px;
        // width: 1194px;
        // 这里的宽度=(几个分支+1)*每个分支宽度-path的宽度

        &.energyContent_area_flex {
          display: flex;
          justify-content: space-between;
        }

        .energyContent_area_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;

          .firstLineSection_line {
            height: 60px;
            position: relative;

            .firstLineSection_line_energy {
              width: 0px;
              position: absolute;
              top: 0px;
            }
          }

          .corps_area {
            width: $branchWidth+px;
            // height: 237px;
            display: flex;
            justify-content: center;
            margin-top: 10px;
            // border: 1px solid red;
            position: relative;

            .popover_area {
              position: absolute;
              top: -25px;
              left: 305px;
            }

            .corps_area_content {
              width: 160px;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              // border: 1px solid yellow;

              label {
                width: 124px;
                height: 32px;
                background: url('@/assets/imagesPicture/TITLE_124_32.png') no-repeat;
                background-size: contain;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: PanMenZhengDao;
                font-weight: normal;
                font-size: 14px;
                color: #e6fcff;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                font-style: normal;
              }

              .picture_PDG {
                width: 160px;
                height: 208px;
                background: url('@/assets/imagesPicture/PDG_160_208.png') no-repeat;
                background-size: contain;
              }

              .picture_LYQ {
                width: 160px;
                height: 208px;
                background: url('@/assets/imagesPicture/LYQ_160_208.png') no-repeat;
                background-size: contain;
              }
            }
          }

          .secondLineSection_line {
            height: 60px;
            position: relative;
            // 这个要设置外边距的高度跟下面图形高度一致
            // margin-bottom: 237px;

            .secondLineSection_line_energy {
              width: 0px;
              position: absolute;
              top: 0px;
            }
          }

          .branchShu_line {
            height: 25px;
            position: relative;

            .branchShu_line_energy {
              width: 0px;
              position: absolute;
              top: -25px;
            }
          }

          .leftAndRightbranch_area {
            display: flex;
            position: absolute;
            top: 184px;

            .lf_branch_line {
              position: relative;

              .branchShuLf_line_energy {
                height: 0px;
                position: absolute;
                right: 0px;
              }
            }

            .rg_branch_line {
              position: relative;

              .branchShuRg_line_energy {
                height: 0px;
                position: absolute;
                left: 0px;
              }
            }
          }

          .corps_detail_content {
            display: flex;
            position: absolute;
            top: 380px;
            // border: 1px solid yellow;

            .corps_detail_content_area {
              display: flex;
              position: relative;

              .firstBranch_line {
                height: 30px;
                position: absolute;
                left: 50%;
                top: -32px;
                transform: translateX(-50%);

                .firstBranchLineSection_line_energy {
                  width: 0px;
                  position: absolute;
                  top: -12px;
                }
              }

              .corps_bottom_detail {
                width: $branchWidth+px;
                height: 329px;
                // border: 1px solid red;
                display: flex;
                justify-content: center;
                position: relative;

                .corps_bottom_detail_content {
                  width: 160px;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  // border: 1px solid yellow;

                  label {
                    width: 124px;
                    height: 32px;
                    background: url('@/assets/imagesPicture/TITLE_124_32.png') no-repeat;
                    background-size: contain;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: PanMenZhengDao;
                    font-weight: normal;
                    font-size: 14px;
                    color: #e6fcff;
                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                    font-style: normal;
                  }

                  .capacity {
                    font-family: SourceHanSansKRegular;
                    font-weight: 400;
                    font-size: 12px;
                    color: #c4e1ff;
                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    margin-top: 5px;

                    span {
                      font-family: DINMedium;
                      font-weight: 500;
                      font-size: 16px;
                      color: #26e6ff;
                      font-style: normal;
                      margin: 0 5px;
                    }
                  }

                  .picture {
                    width: 160px;
                    height: 208px;
                  }

                  .picture_CDZ {
                    background: url('@/assets/imagesPicture/CDZ_160_208.png') no-repeat;
                    background-size: contain;
                    cursor: pointer;
                  }

                  .picture_CDZ_active {
                    background: url('@/assets/imagesPicture/CDZ_160_208_active.png') no-repeat;
                    background-size: contain;
                  }

                  .picture_V2G {
                    background: url('@/assets/imagesPicture/V2G_160_208.png') no-repeat;
                    background-size: contain;
                    cursor: pointer;
                  }

                  .picture_V2G_active {
                    background: url('@/assets/imagesPicture/V2G_160_208_active.png') no-repeat;
                    background-size: contain;
                  }

                  .status {
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;

                    img {
                      width: 44px;
                      height: 35px;
                      transform: translateX(-8px);
                    }

                    span {
                      font-family: SourceHanSansKRegular;
                      font-weight: 400;
                      font-size: 14px;
                      color: #ffba6c;
                      font-style: normal;
                      transform: translateY(-3px);
                      margin-left: 3px;
                    }
                  }

                  .soc {
                    font-family: SourceHanSansKRegular;
                    font-weight: 500;
                    font-size: 12px;
                    color: #fe96ff;
                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    margin-top: 6px;

                    span {
                      font-family: DINMedium;
                      font-weight: 500;
                      font-size: 18px;
                      color: #e6fcff;
                      font-style: normal;
                      background: linear-gradient(180deg, #fcebff 0%, #fcebff 30%, #fe96ff 100%);
                      -webkit-background-clip: text;
                      background-clip: text;
                      -webkit-text-fill-color: transparent;
                      margin: 0 4px 0 10px;
                    }
                  }
                }

                .popover_area {
                  position: absolute;
                  top: -10px;
                  left: 305px;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 能流动画
@keyframes aSurnameAM {
  0% {
    width: 6px;
  }

  100% {
    width: 6px;
    top: 4px;
  }
}

@keyframes lfAM {
  0% {
    height: 6px;
  }

  100% {
    height: 6px;
    right: calc(100% - 34px);
  }
}

@keyframes rgAM {
  0% {
    height: 6px;
  }

  100% {
    height: 6px;
    left: calc(100% - 34px);
  }
}

@keyframes firstLineAM {
  0% {
    width: 6px;
  }

  100% {
    width: 6px;
    top: 34px;
  }
}

@keyframes secondLineAM {
  0% {
    width: 6px;
  }

  100% {
    width: 6px;
    top: 34px;
  }
}

@keyframes branchShuLineAM {
  0% {
    width: 6px;
  }

  100% {
    width: 6px;
    top: -5px;
  }
}

@keyframes lfBranchAM {
  0% {
    height: 6px;
  }

  100% {
    height: 6px;
    right: calc(100% - 34px);
  }
}

@keyframes rgBranchAM {
  0% {
    height: 6px;
  }

  100% {
    height: 6px;
    left: calc(100% - 34px);
  }
}

@keyframes firstBranchLineAM {
  0% {
    width: 6px;
  }

  100% {
    width: 6px;
    top: 6px;
  }
}